

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>功能演示1 - 通用分页组件</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <link rel="stylesheet" href="../../../layui/layui/css/layui.css" media="all">
        <link rel="stylesheet" href="../../../layui/style/admin.css" media="all">
    </head>
    <body>


        <div class="layui-card layadmin-header">
            <div class="layui-breadcrumb" lay-filter="breadcrumb">
                <a lay-href="">主页</a>
                <a><cite>组件</cite></a>
                <a><cite>分页演示一</cite></a>
            </div>
        </div>

        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">总页数低于页码总数</div>
                        <div class="layui-card-body">
                            <div id="test-laypage-demo0"></div>
                        </div>
                    </div>
                </div>

                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">总页数大于页码总数</div>
                        <div class="layui-card-body">
                            <div id="test-laypage-demo1"></div>
                        </div>
                    </div>
                </div>

                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">自定义主题 - 颜色随意定义</div>
                        <div class="layui-card-body">
                            <div id="test-laypage-demo2"></div>
                            <div id="test-laypage-demo2-1"></div>
                            <div id="test-laypage-demo2-2"></div>
                        </div>
                    </div>
                </div>

                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">自定义首页、尾页、上一页、下一页文本</div>
                        <div class="layui-card-body">
                            <div id="test-laypage-demo3"></div>
                        </div>
                    </div>
                </div>

                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">不显示首页尾页</div>
                        <div class="layui-card-body">
                            <div id="test-laypage-demo4"></div>
                        </div>
                    </div>
                </div>

                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">开启HASH</div>
                        <div class="layui-card-body">
                            <div id="test-laypage-demo5"></div>
                        </div>
                    </div>
                </div>

                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">只显示上一页、下一页</div>
                        <div class="layui-card-body">
                            <div id="test-laypage-demo6"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <script src="../../../layui/layui/layui.js"></script>  
        <script>
            layui.config({
                base: '../../../layuiadmin/' //静态资源所在路径
            }).extend({
                index: 'lib/index' //主入口模块
            }).use(['index', 'laypage'], function () {
                var laypage = layui.laypage;

                //总页数低于页码总数
                laypage.render({
                    elem: 'test-laypage-demo0'
                    , count: 50 //数据总数
                });

                //总页数大于页码总数
                laypage.render({
                    elem: 'test-laypage-demo1'
                    , count: 70 //数据总数
                    , jump: function (obj) {
                        console.log(obj)
                    }
                });

                //自定义样式
                laypage.render({
                    elem: 'test-laypage-demo2'
                    , count: 100
                    , theme: '#1E9FFF'
                });
                laypage.render({
                    elem: 'test-laypage-demo2-1'
                    , count: 100
                    , theme: '#FF5722'
                });
                laypage.render({
                    elem: 'test-laypage-demo2-2'
                    , count: 100
                    , theme: '#FFB800'
                });

                //自定义首页、尾页、上一页、下一页文本
                laypage.render({
                    elem: 'test-laypage-demo3'
                    , count: 100
                    , first: '首页'
                    , last: '尾页'
                    , prev: '<em>←</em>'
                    , next: '<em>→</em>'
                });

                //不显示首页尾页
                laypage.render({
                    elem: 'test-laypage-demo4'
                    , count: 100
                    , first: false
                    , last: false
                });

                //开启HASH
                laypage.render({
                    elem: 'test-laypage-demo5'
                    , count: 500
                    , curr: location.hash.replace('#!fenye=', '') //获取hash值为fenye的当前页
                    , hash: 'fenye' //自定义hash值
                });

                //只显示上一页、下一页
                laypage.render({
                    elem: 'test-laypage-demo6'
                    , count: 50
                    , layout: ['prev', 'next']
                    , jump: function (obj, first) {
                        if (!first) {
                            layer.msg('第 ' + obj.curr + ' 页');
                        }
                    }
                });

            });
        </script>
    </body>